<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .goods-list {
            width: 1226px;
            margin: 0px auto;
        }

        .goods-list .list {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            font-size: 14px;
        }

        .goods-list .list li {
            width: 18%;
            box-sizing: border-box;
            padding: 5px;

        }

        .goods-list .list li:not(:nth-child(5n+1)) {
            margin-left: 2.5%;
        }

        .goods-list .list li img {
            width: 80%;
            display: block;
            margin: 20px auto;
        }

        .goods-list .list li .price {
            color: #e4393c;
        }

        .goods-list .list li .desc {
            font-size: 12px;
            line-height: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="goods-list">
        <ul class="list">
            <!-- <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li> -->
        </ul>
    </div>
</body>
<script>
    var listUl = document.getElementsByClassName("list")[0];

    var xhr = new XMLHttpRequest(); // 0

    xhr.open("get", "../data/goods.json", true); // 1

    xhr.send(); // 1

    xhr.onreadystatechange = function () {
        // 2 3 4
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            // console.log(result);

            // 注意: 纯JSON格式的字符串 才能被JSON.parse()解析 
            result = JSON.parse(result);
            console.log(result);

            var html = "";
            result.forEach((goods) => {
                console.log(goods); // {}
                var { goodsId, goodsName, goodsMsg, goodsImg, goodsPrice } = goods;
                html += `<li>
                <a href=""><img
                        src="${goodsImg}"
                        alt=""></a>
                    <div class="price">￥${goodsPrice.toFixed(2)}</div>
                    <div class="desc">${goodsMsg}</div>
                </li>`;
            })

            listUl.innerHTML = html;

        }
    }




</script>

</html>